<template>
  <q-modal v-model="modalVisible" :header="`${$t('MapCore.HeatMap')}`" :menuBtn="false" :persistent="false"
           classes="column no-wrap" fullHeight fullWidth>
    <qx-form v-model="searchForm" :option="searchOption" class="q-py-md no-margin" isSearch
             @submit="startSearch"></qx-form>
    <IndexMonitoring v-model:openedMapCode="openedMapCode" v-model:refreshHeatMap="refreshHeatMap"
                     :injectHeatMapSearch="injectHeatMapSearch" classes="col" nonHeader readonly
                     source="heatMap"></IndexMonitoring>
  </q-modal>
</template>

<script setup>
import { i18n, toI18nName } from 'boot/i18n'
import { date } from 'quasar'
import { postAPI } from 'src/api'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import IndexMonitoring from 'src/views/MapCore/IndexMonitoring.vue'
import { computed, nextTick, ref, watch } from 'vue'

const AMRs = ref([])
const currentDate = new Date()
const AGVBrands = ref([])
const searchForm = ref({})
const amrAjax = ref(false)
const alarmTypes = ref([])
const alarmAjax = ref(false)
const openedMapCode = ref('')
const refreshHeatMap = ref(false)
const injectHeatMapSearch = ref({})
const modalVisible = defineModel('modelValue', { type: Boolean, default: false })
const searchOption = computed(() => {
  const to = date.formatDate(currentDate, 'YYYY-MM-DD')
  const from = date.formatDate(date.subtractFromDate(currentDate, { days: 30 }), 'YYYY-MM-DD')
  return {
    searchSpan: 5,
    column: [{
      label: `${i18n.t('Misc.StatisticsDate')}`, field: 'statisticalDate', type: 'daterange', searchRequired: true,
      searchLabelWidth: 70, clearable: false, searchValue: { from, to }, onChange: getAlarmTypes
    }, {
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', options: AGVBrands.value,
      searchValue: AGVBrands.value[0]?.agvBrandCode,
      props: { label: `${toI18nName('agvBrandNameZhCn')}`, value: 'agvBrandCode' },
      searchLabelWidth: 70, clearable: false, searchRequired: true, change: val => {
        getAlarmTypes()
        getAMRs(val)
      }
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'amrCode', type: 'select', options: AMRs.value,
      searchMultiple: true, loading: amrAjax.value, props: { label: 'agvDeviceName', value: 'agvDeviceCode' },
      searchLabelWidth: 60, change: getAlarmTypes
    }, {
      label: `${i18n.t('AGVCore.AlarmType')}`, field: 'warnType', type: 'select', options: alarmTypes.value,
      searchLabelWidth: 60, loading: alarmAjax.value, props: { label: 'warnDesc', value: 'warnType' }
    }]
  }
})

watch(openedMapCode, () => getAlarmTypes())
watch(modalVisible, val => val && getBrandList())
const getAMRs = (agvBrandCode = '') => {
  amrAjax.value = true
  postAPI('/yfagv/api/agvManage/list', { isEnable: '1', pageSize: '-1', agvBrandCode }, data => {
    AMRs.value = data.rows || []
    amrAjax.value = false
  }, () => {
    amrAjax.value = false
  })
}
const getBrandList = () => {
  getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => {
    AGVBrands.value = data
    if (!AGVBrands.value.length) return
    getAMRs(AGVBrands.value[0].agvBrandCode)
    initData()
  })
}
const getAlarmTypes = () => {
  alarmAjax.value = true
  postAPI('/yfagv/api/agvWarn/queryWarnTypeList', { ...formatSearchForm(), warnType: '' },
    data => {
      alarmTypes.value = data || []
      alarmAjax.value = false
    }, () => {
      alarmTypes.value = []
      alarmAjax.value = false
    })
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  if (params.statisticalDate && params.statisticalDate.from) {
    params.startDateTime = params.statisticalDate.from
    params.endDateTime = params.statisticalDate.to
    delete params.statisticalDate
  }
  if (params.amrCode) params.amrCode = params.amrCode.split(',')
  params.mapCode = openedMapCode.value
  return params
}
const initData = () => {
  nextTick(() => injectHeatMapSearch.value = formatSearchForm())
}
const startSearch = (_, done) => {
  done && done()
  injectHeatMapSearch.value = formatSearchForm()
  refreshHeatMap.value = true
}
</script>